<template>
  <div class="menuBip">
    <div class="menuBipContent">
        <vue-scroll
                :ops="ops"
            >
            <el-menu default-active="1-4-1" class="el-menu-vertical-demo" :collapse="collapse">
            <el-menu-item index="1">
                <img class="menu_icon" src="@/assets/img/menu/menu_add.png" alt="" @click="addMenuShow">
                <span slot="title">新建菜单</span>
            </el-menu-item>
            <el-submenu index="2">
                <template slot="title">
                <img class="menu_icon" src="@/assets/img/menu/menu0.png" alt="">
                <span slot="title">我的收藏 </span>
                </template>
                <el-menu-item-group>
                <span slot="title">分组一</span>
                <el-menu-item index="1-1">选项1</el-menu-item>
                <el-menu-item index="1-2">选项2</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
           
            <el-menu-item index="3">
                <img class="menu_icon" src="@/assets/img/menu/menu1.png" alt="">
                <span slot="title">导航三</span>
            </el-menu-item>
            <el-menu-item index="4">
                <img class="menu_icon" src="@/assets/img/menu/menu2.png" alt="">
                <span slot="title">导航四</span>
            </el-menu-item>
        </el-menu>
        </vue-scroll>
    </div>
    <div class="munuBOttom">
        <span class="fontColor content" v-show="!collapse">新建菜单组</span>
        <i class="iconfont icon-icon-navicon hoverColor " @click="expend()"></i>
    </div>
    
    <div class="all_dialog" @click="hideMenuBoard" v-show="menuFlag"></div>
    <div class="menuBoard" :style="`left:${sWidth}px`" v-show="menuFlag">
        <div class="leftBox">
            <div class="search">
                <el-input
                    class="hoverBorderBottom"
                    placeholder="搜索关键字"
                    prefix-icon="iconfont icon-sousuo"
                    v-model="keywords">
                </el-input>
            </div>
            <div class="menuListContainer">
            <vue-scroll
                :ops="ops"
            >
                <div class="menuList">
                    <MenuItem  :key="index" v-for="(item,index) in menuTree" :data="item" :index="index"></MenuItem>
                </div>
            </vue-scroll>
            </div>
            <div class="menuBanner">
                <img src="@/assets/img/menu/menuBanner.png" alt="">
            </div>
        </div>
        <div class="rightBox">
            <div class="visitelast">
                最近访问
                <img src="@/assets/img/menu/menuNew.png" alt="">
                <i class="iconfont icon-guanbi" @click="hideMenuBoard"></i>
            </div>
            <ul class="visitList hoverFont">
                <li>
                    门户配置
                </li>
                <li>
                    门户菜单
                </li>
                <li>
                    门户角色管理
                </li>
                <li>
                    门户常用链接
                </li>
            </ul>
        </div>
    </div>
    <MenuDialog :menuDialog="menuDialog"></MenuDialog>
  </div>
</template>

<script>
import bus from '../common/bus';
import MenuItem from './SidebarBip/MenuItem';
import MenuDialog from './SidebarBip/MenuDialog';
import { createNamespacedHelpers } from 'vuex';
const { mapState, mapMutations,mapActions } = createNamespacedHelpers('homeModule');
const { mapMutations: mapTagMutations } = createNamespacedHelpers('tagModule');
export default {
    name: 'Menu',
    data () {
        return {
            ops: {
                scrollPanel:{
                    scrollingX: false,//是否启用 x 或者 y 方向上的滚动 
                },
                rail: {
                    opacity: '0',
                },
                bar: {
                    onlyShowBarOnScroll: false,//当页面滚动时显示
                    keepShow: false,//是否一直显示
                    background: '#c6c6c6',
                    size: '3px',
                    right:0
                },
            },
            collapse: true, // 是否折叠 true 折叠
            keywords:'', // 搜索关键字
            menuDialog:false // 是否显示新建菜单
        };
    },
    computed: {
        ...mapState([
            'menuTree',
            'menuFlag',
            'sWidth',
        ]),
    },
    components: {
        MenuItem,
        MenuDialog
    },
    created () {
        // 通过 Event Bus 进行组件间通信，来折叠侧边栏
        bus.$on('collapse', msg => {
            this.collapse = msg;
        });
        // 获取菜单列表
        this.getApmenuAsync();
    },
    methods: {
        ...mapTagMutations([
            'addTag',
        ]),
        ...mapMutations([
            'slibarExpand',
            'updateMenu'
        ]),
        ...mapActions([
            'getApmenuAsync'
        ]),
        // 隐藏菜单面板
        hideMenuBoard(){
            this.updateMenu();
        },
        // 展开菜单
        expend () {
            this.slibarExpand();
            this.collapse = !this.collapse;
        },
        // 新建菜单弹出
        addMenuShow(){
            this.menuDialog = true;
        },
        // 新建菜单隐藏
        addMenuHide(){
            this.menuDialog = false;
        }
    }
};
</script>

<style scoped lang="scss">
    .menuBip{
        height: 100%;
        border-right: 1px solid #ccc;
         .el-menu-vertical-demo:not(.el-menu--collapse) {
            width:100%;
            height: calc(100vh - 100px);
        }
         .el-menu--collapse{
            width: 100%;
        }
         .el-menu{
            border: none;
        }
         .el-submenu__title{
            padding: 0;
            padding-left: 12px!important;
        }
         .el-menu-item{
            padding: 0;
            padding-left: 12px!important;
        }
         .el-tooltip{
            padding: 0;
            padding-left: 12px!important;
        }
        .menuBipContent{
            height: calc(100vh - 100px);
            .menu_icon{
                margin-right: 6px;
            }
        }
        .munuBOttom{
            border-top: 1px solid #ccc;
            margin: 0 4px;
            padding-top: 10px;
            transition: all;
            position: relative;
            .content{
                width: 70px;
                overflow: hidden;
                position: absolute;
                left: 12px;
            }
            i{
                cursor: pointer;
                color: #555;
                position: absolute;
                right: 12px;
            }
        }
        .menuBoard{
            position: fixed;
            top: 58px;
            left: 65px;
            height: calc(90vh - 58px);
            width: 80%;
            background: #f1f2f7;
            z-index: 101;
            box-shadow: 2px 2px 13px -3px #cacaca;
            border-radius: 3px;
            .leftBox{
                background: #fff;
                box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
                width: 76%;
                height: 100%;
                float: left;
                .search{
                    margin: 0 40px;
                    padding-top: 20px;
                    border-bottom: 1px solid #ccc;
                     .el-input__inner{
                        border: none;
                        
                    }
                }
                .search:hover{
                    border: none;
                }
                .menuListContainer{
                    height: calc(90vh - 202px);
                }
                .menuList{
                    padding:0 24px;
                    column-count:4;
                    // overflow-x: hidden
                }
                .menuBanner{
                    height: 92px;
                    width: 76%;
                    color: #fff;
                    position: absolute;
                    bottom: 0;
                    overflow: hidden;
                }
            }
            .rightBox{
                width: calc(24% - 5px);
                margin-top: 11px;
                padding-right: 5px;
                float: left;
                height: 100%;
                overflow-x: hidden;
                .visitelast{
                    height: 44px;
                    line-height: 44px;
                    padding: 0 20px 0 40px;
                    img{
                        width: 34px;
                        height: 20px;
                        position: relative;
                        top: 6px;
                        margin-left: 8px;
                    }
                    .icon-guanbi{
                        float: right;
                        cursor: pointer;
                    }
                }
                .visitList{
                    margin: 0 30px;
                    li{
                        background: #fff;
                        box-shadow: 0 4px 12px 0 rgba(218, 221, 238, 0.5), 0 1px 3px 0 rgba(182, 188, 224, 0.5), 0 1px 0 0 #dfe0f1;
                        margin-top: 20px;
                        padding: 10px;
                        border-radius: 4px;
                        cursor: pointer;
                    }
                }
            }
        }
        .all_dialog{
            position: fixed;
            top:0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 100;
            background: #000;
            opacity: .3
        }
    }
    
</style>
